<template>
  <el-container style="height: 500px;">
    <el-aside width="220px" style="background-color: rgb(37, 57, 76);height:100vh">
      <img class="logo" src="@/assets/logo.svg" alt />
      <el-menu
        router
        unique-opened
        background-color="rgb(37, 57, 76)"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-data"></i>产品管理
          </template>
          <el-menu-item index="/product/create">添加商品</el-menu-item>
          <el-menu-item index="/product/list">商品列表</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-check"></i>订单管理
          </template>
          <el-menu-item index="/order/list">订单列表</el-menu-item>
          <el-menu-item index="/order/items">订单商品</el-menu-item>
          <!-- <el-menu-item index="/swiper">轮播管理</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-custom"></i>人员管理
          </template>
          <el-menu-item index="/user">用户管理</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-s-custom"></i>地址管理
          </template>
          <el-menu-item index="/address/create">添加地址</el-menu-item>
          <el-menu-item index="/address/list">地址列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container style="height:100vh">
      <el-header style="text-align:right; font-size: 14px;">
        <i class="el-icon-switch-button" @click="logout" style="margin-right: 15px;font-size:20px"></i>
      </el-header>
      <el-main>
        <router-view :key="$router.path"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return{
      
    }
  },
  methods: {
    logout(){
      sessionStorage.clear()
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="scss">
.el-header {
  color: rgb(27, 23, 23);
  line-height: 60px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.4);
}

.el-aside {
  color: #333;
  .logo {
    display: block;
    width: 170px;
    margin: 10px auto;
  }
  .el-menu {
    border-right: none;
  }
}
</style>
